<template>
    <div class="swiperBox">
        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>
                <img @click="toarticle" src="../../../assets/banner/1.jpeg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img @click="toarticle" src="../../../assets/banner/2.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img @click="toarticle" src="../../../assets/banner/3.jpeg" alt="">
            </swiper-slide>            
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'Banner',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          // Some Swiper option/callback...
          autoplay:{
            delay:2000,
            disableOnInteraction:false
          },
          loop:true

        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    },
    methods:{
        toarticle(){
            this.$router.push('Article')
        }
    }
  
}
</script>

<style scoped>
.swiperBox{
    margin: 20px 0;
    height: 260px;
}
.swiper-container{
    width: 100%;
    height: 260px;
}
.swiper-container img{
    width: 100%;  
    height: 100%;   
}
</style>